<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>表单模块 - layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="../src/css/layui.css">
    <style>
      body{padding: 16px;}
    </style>
  </head>
<body>
<fieldset class="layui-elem-field">
  <legend>横向表单展示</legend>
  <div class="layui-field-box">
    <form class="layui-form" method="get" lay-filter="top" id="AAA">
      <div class="layui-form-item">
        <div class="layui-input-inline">
          <input type="text" name="arr[]" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-input-inline">
          <input type="text" name="arr[]" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-input-inline">
          <input type="text" name="arr[title]" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <button class="layui-btn" id="testSubmit">立即提交</button>
      </div>
    </form>
  </div>
</fieldset>
<fieldset class="layui-elem-field">
  <legend>默认表单展示</legend>
  <div class="layui-field-box">
    <form class="layui-form layui-form-pane1" action="" lay-filter="first">
      <div class="layui-form-item">
        <label class="layui-form-label">输入框</label>
        <div class="layui-input-block">
          <input type="text" name="title" lay-verify="required|title" lay-reqText="标题不能为空" required placeholder="请输入标题" autocomplete="off" class="layui-input" >
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">手机</label>
        <div class="layui-input-block">
          <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input demo-phone">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">验证码</label>
        <div class="layui-input-inline">
          <input type="text" name="vercode" lay-verify="required" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid" style="padding: 0!important;">
          <button type="button" class="layui-btn layui-btn-primary" lay-on="get-vercode">获取验证码</button>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-block">
          <input type="email" name="email" lay-verify="email"  lay-verType="alert" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">生日</label>
        <div class="layui-input-block">
          <input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-inline">
          <input type="password" name="password" lay-verify="required|pass" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">请务必填写用户名</div>
      </div>
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">范围</label>
          <div class="layui-input-inline" style="width: 100px;">
            <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
          </div>
          <div class="layui-form-mid">-</div>
          <div class="layui-input-inline" style="width: 100px;">
            <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">行内表单</label>
          <div class="layui-input-block">
            <select name="quiz" lay-verify="required" lay-verType="tips"  lay-filter="quiz111">
              <option value="">请"选择"问题</option>
              <option value="0">你工"作"的 第一个城市</option>
              <option value="1" disabled>你的工号</option>
              <option value="2">
                你最喜欢的老师
              </option>
            </select>
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">select分组</label>
          <div class="layui-input-block">
            <select name="quiz" lay-filter="quiz">
              <option value="">请选择问题</option>
              <optgroup label="城市记忆">
                <option value="0">你工作的第一个城市</option>
              </optgroup>
              <optgroup label="学生时代">
                <option value="1" disabled>你的工号</option>
                <option value="2">你最喜欢的老师</option>
              </optgroup>
            </select>
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">选择框</label>
        <div class="layui-input-block">
          <select name="interest" lay-filter="interest">
            <option value=""></option>
            <option value="0">写作</option>
            <option value="1">阅读</option>
            <option value="2">游戏</option>
            <option value="3">音乐</option>
            <option value="4">旅行</option>
          </select>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">搜索选择框</label>
          <div class="layui-input-block">
            <select name="interest-search" lay-filter="interest-search" lay-search="">
              <option value="">请搜索</option>
              <option value="写作">写"作"</option>
              <option value="阅读" disabled>阅读</option>
              <option value="游戏" disabled>游戏</option>
              <option value="音乐">音乐</option>
              <option value="旅行">旅行</option>
              <option value="读书">读书</option>
              <option value="1">layer</option>
              <option value="2" disabled>laydate</option>
              <option value="3">3</option>
              <option value="4">layim</option>
              <option value="5">laypage</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
            </select>
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">搜索分组框</label>
          <div class="layui-input-block">
            <select name="interest-search-group" lay-filter="interest-search-group" lay-search="">
              <option value="">请搜索</option>
              <optgroup label="分组a">
                <option value="a1">a1</option>
                <option value="a2">a2</option>
              </optgroup>
              <optgroup label="分组aa">
                <option value="aa1">aA1</option>
                <option value="aa2">aA2</option>
              </optgroup>
              <optgroup label="分组b">
                <option value="b1">b1</option>
                <option value="b2">b2</option>
              </optgroup>
              <optgroup label="分组bb">
                <option value="bb1">bb1</option>
                <option value="bb2">bb2</option>
              </optgroup>
              <optgroup label="分组bbb">
                <option value="bbb1">bBb1</option>
                <option value="bbb2">bBB2</option>
              </optgroup>
              <optgroup label="分组c">
                <option value="c1">c1</option>
                <option value="c2">c2</option>
              </optgroup>
              <optgroup label="分组cc">
                <option value="cc1">cc1</option>
                <option value="cc2">cc2</option>
              </optgroup>
              <optgroup label="分组ccc">
                <option value="ccc1">ccc1</option>
                <option value="ccc2">ccc2</option>
              </optgroup>
              <optgroup label="分组cccc">
                <option value="cccc1">cccc1</option>
                <option value="cccc2">cccc2</option>
              </optgroup>
            </select>
          </div>
        </div>
      </div>

      <div class="layui-form-item" pane>
        <label class="layui-form-label">复选框</label>
        <div class="layui-input-block">
          <input type="checkbox" name="like[write]" title="写作">
          <input type="checkbox" name="like[read]" title="阅读">
          <input type="checkbox" name="like[game]" title="游戏" disabled>
        </div>
      </div>
      <div class="layui-form-item" pane>
        <label class="layui-form-label">原始复选框</label>
        <div class="layui-input-block">
          <input type="checkbox" name="like1[write]" lay-skin="primary" title="写作">
          <input type="checkbox" name="like1[read]" lay-skin="primary" title="阅读">
          <input type="checkbox" name="like1[game]" lay-skin="primary" title="游戏" disabled>
        </div>
      </div>
      <div class="layui-form-item" pane>
        <label class="layui-form-label">开关关</label>
        <div class="layui-input-block">
          <input type="checkbox" name="close" lay-skin="switch" title="开关">
          <input type="checkbox" name="close2" lay-skin="switch" title="开关" lay-text="ON|OFF" disabled>
        </div>
      </div>
      <div class="layui-form-item" pane>
        <label class="layui-form-label">开关开</label>
        <div class="layui-input-block">
          <input type="checkbox" checked name="open" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
          <input type="checkbox" name="open2" lay-skin="switch" lay-filter="switchTest" lay-text="已绑定|绑定">
        </div>
      </div>
      <div class="layui-form-item" pane>
        <label class="layui-form-label">单选框</label>
        <div class="layui-input-block">
          <input type="radio" name="sex" value="男" title="男">
          <input type="radio" name="sex" value="女" title="女" checked>
          <input type="radio" name="sex" value="中型" title="中" disabled>
        </div>
      </div>
      <div class="layui-form-item" pane>
        <label class="layui-form-label">单选框</label>
        <div class="layui-input-block">
          <input type="radio" name="sex.id" value="男" title="男">
          <input type="radio" name="sex.id" value="女" title="女" checked>
          <input type="radio" name="sex.id" value="中型" title="中">
        </div>
      </div>
      <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">请填写描述</label>
        <div class="layui-input-block">
          <textarea placeholder="请输入内容" class="layui-textarea" name="desc"></textarea>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
  </div>
</fieldset>
<fieldset class="layui-elem-field">
  <legend>原始表单展示</legend>
  <div class="layui-field-box">
    <form id="test1" action="" target="_blank">
      <input type="radio" value="girl" disabled>
      <input type="checkbox" name="love[a]">
      <input type="checkbox" name="love[b]">
      <input value="1">
      <input name="as">
      <input name="=" value="2">
      <select name="quiz">
        <option value="">请选择问题</option>
        <option disabled value="你工作的第一个城市">你工作的第一个城市</option>
        <option value="你的工号">你的工号</option>
        <option value="你最喜欢的老师">你最喜欢的老师</option>
        <option value="你的工号" selected>你的工号</option>
        <option value="你的工号">你的工号</option>
      </select>
      <button type="submit">原始表单，测试提交</button>
    </form>
  </div>
</fieldset>
<fieldset class="layui-elem-field">
  <legend>表单方框风格</legend>
  <div class="layui-field-box">
    <form class="layui-form layui-form-pane" action="">
      <div class="layui-form-item">
        <label class="layui-form-label">输入框</label>
        <div class="layui-input-block">
          <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">密码框</label>
        <div class="layui-input-inline">
          <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">辅助文字</div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">选择框</label>
        <div class="layui-input-block">
          <select name="city" lay-verify="required">
            <option value=""></option>
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">广州</option>
            <option value="3">深圳</option>
            <option value="4">杭州</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item" pane>
        <label class="layui-form-label">单选框</label>
        <div class="layui-input-block">
          <input type="radio" name="sex" value="男" title="男">
          <input type="radio" name="sex" value="女" title="女" checked>
        </div>
      </div>
    </form>
  </div>
</fieldset>
<script src="../src/layui.js" src1="https://cdn.staticfile.org/layui/2.6.8/layui.js"></script>
<script>
layui.use(['form', 'util', 'laydate'], function(){
  var $ = layui.$;
  var form = layui.form;
  var layer = layui.layer;
  var util = layui.util;
  var laydate = layui.laydate;

  //自定义验证规则
  form.verify({
    title: function(value){
      if(value.length < 5){
        return '标题也太短了吧';
      }
    }
    ,pass: [/(.+){6,12}$/, '密码必须6到12位']
    ,money: [
      /^\d+\.\b\d{2}\b$/
      ,'金额必须为小数保留两位'
    ]
    //,n: [/^(\d)+$/, '数字校验']
  });

  /*
  form.on('submit(top)', function(data){
    console.log(data);
    return false;
  });
  */

  //方法提交
$('#testSubmit').on('click', function(){
  form.submit('top', function(data){
    layer.confirm('确定提交么？', function(index){
      layer.close(index);

      // 验证均通过后执行提交
      setTimeout(function(){
        alert(JSON.stringify(data.field));
      })

    });
  });
  return false;
});


  //日期
  laydate.render({
    elem: '#date'
  });

  //初始赋值
  var thisValue = form.val('first', {
    'title': '测试测试测试'
    //,'phone': 11111111111
    ,'email': 'xu@sentsin.com'
    ,'date': '2021-05-30'
    ,'password': 123123
    //,'quiz': 2
    ,'interest': 3
    ,'like[write]': true
    //,'open': false
    ,'sex': '男'
    ,'desc': 'form 是我们非常看重的一块'
    ,xxxxxxxxx: 123
  });


  //事件
  form.on('select(quiz111)', function(data){
    console.log('select: ', this, data);
  });

  form.on('select(quiz)', function(data){
    console.log('select.quiz：', this, data);
  });

  form.on('select(interest)', function(data){
    console.log('select.interest: ', this, data);
  });

  form.on('checkbox', function(data){
    console.log(this.checked, data.elem.checked);
  });

  form.on('switch', function(data){
    console.log(data);
  });

  form.on('radio', function(data){
    console.log(data);
  });

  // 提交事件
  form.on('submit(*)', function(data){
    console.log(data)
    alert(JSON.stringify(data.field));
    return false;
  });

  // 普通事件
  util.on('lay-on', {
    "get-vercode": function(othis){
      var isvalid = form.validate('.demo-phone');

      // 验证通过
      if(isvalid){
        layer.msg('手机号验证通过，执行发送验证码的操作');
      }
    }
  });

});
</script>
</body>
</html>
